<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5 页面菜单示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }
        .menu {
            display: flex;
            justify-content: center;
            background-color: #333;
            padding: 10px;
        }
        .menu-item {
            margin: 0 15px;
            color: white;
            text-decoration: none;
            font-size: 18px;
            cursor: pointer;
        }
        .menu-item:hover {
            color: #ff6347;
        }
        .content {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>

<!-- 菜单栏 -->
<div class="menu">
    <div class="menu-item" onclick="openLink('https://www.alibabacloud.com')">阿里云官网</div>
    <div class="menu-item" onclick="showAlert()">显示提示框</div>
    <div class="menu-item" onclick="changeBackgroundColor()">更改背景颜色</div>
    <div class="menu-item" onclick="redirectToPage()">跳转到新页面</div>
</div>

<!-- 页面内容 -->
<div class="content">
    <h1>欢迎访问 H5 示例页面</h1>
    <p>点击上方菜单项触发不同的功能。</p>
</div>

<script>
    // 打开外部链接
    function openLink(url) {
        window.open(url, '_blank');
    }

    // 显示提示框
    function showAlert() {
        alert('这是一个提示框！');
    }

    // 更改背景颜色
    function changeBackgroundColor() {
        document.body.style.backgroundColor = '#e0f7fa';
    }

    // 跳转到新页面
    function redirectToPage() {
        window.location.href = 'https://www.example.com';
    }
</script>

</body>
</html>